<template>
  <view class="">
    <view class="header"> </view>
    <view class="titleBox">
      <image :src="userInfo?.headUrl" mode="scaleToFill" />
      <view class="info">
        <view class="title">山河 </view>
        <view class="subTitle">邀请码：{{ userInfo?.userCode }}</view>
      </view>
    </view>
    <view class="main">
      <view class="orderBox">
        <CommonTitle title="我的订单" titleFontSize="32rpx" @more-handle="goOrder(null)" />
        <view class="walletList">
          <view v-for="(item, index) in myOrderList" :key="index" @click="goOrder(item.value)">
            <image class="icon" :src="item.icon" mode=""></image>
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>
      <view class="orderBox" style="margin-top: 20rpx">
        <CommonTitle title="其他工具" titleFontSize="32rpx" isShow />
        <u-cell-group :border="false">
          <u-cell :border="false" icon="../../static/myPage/spsc.png" title="商品收藏" is Link @click="goPage('/pages/myPage/productCollection')" />
          <!-- <u-cell :border="false" icon="../../static/myPage/xpxq.png" title="新品需求" isLink @click="goPage('/pages/myPage/newProductDemand')" /> -->
          <u-cell :border="false" icon="../../static/myPage/shdz.png" title="收货地址" isLink @click="goPage('/pages/myPage/myShippingAddress')" />
          <u-cell :border="false" icon="../../static/myPage/zzhgl.png" title="子账号管理" isLink @click="goPage('/pages/myPage/subAccountManage')" />
          <!-- <u-cell :border="false" icon="../../static/myPage/xgmm.png" title="修改密码" isLink @click="goPage('/pages/myPage/password')" /> -->
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import CommonTitle from "../../components/commonTitle.vue";
import { goPage } from "../../utils/commonFn";
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "../../stores/counter";
const userInfo = ref();
const lxPhone = ref();
const { userLevelInfo } = useStore();
onShow(async () => {});
const myOrderList = ref([
  {
    icon: "../../static/myPage/dfj.png",
    name: "待分拣",
    value: {
      index: 1,
      value: "WAIT_PAY",
    },
  },
  {
    icon: "../../static/myPage/fjz.png",
    name: "分拣中",
    value: {
      index: 2,
      value: "PAY_SUCCESS",
    },
  },
  {
    icon: "../../static/myPage/psz.png",
    name: "配送中",
    value: {
      index: 3,
      value: "IN_DISTRIBUTION",
    },
  },
  {
    icon: "../../static/myPage/yqs.png",
    name: "已签收",
    value: {
      index: 4,
      value: "CONFIRM_RECEIPT",
    },
  },
  {
    icon: "../../static/myPage/qbdd.png",
    name: "全部订单",
    value: {
      index: 0,
      value: "",
    },
  },
]);
const goOrder = (status: any) => {
  uni.navigateTo({
    url: `/pages/order/orderList?status=${JSON.stringify(status)}`,
  });
};
</script>

<style lang="less" scoped>
.titleBox {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin-top: -550rpx;
  padding-left: 48rpx;
  margin-bottom: 32rpx;

  image {
    width: 128rpx;
    height: 128rpx;
    border: 4rpx solid #ffffff;
    border-radius: 50%;
    margin-right: 32rpx;
  }
  .info {
    .title {
      display: flex;
      align-items: center;
      font-size: 40rpx;
      font-weight: 500;
      color: #fff;
    }
    .subTitle {
      font-size: 28rpx;
      font-weight: 500;
      color: #fff;
      line-height: 40rpx;
      margin-top: 20rpx;
    }
  }
}

.orderBox {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  padding-top: 1px;
  margin-top: 48rpx;
  position: relative;
  z-index: 2;
  .walletList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90rpx, 1fr)); /* 自适应列布局 */
    gap: 10px; /* 子元素之间的间距 */
    margin: 0 auto;
    text-align: center;
    margin-top: 33rpx;
    width: 100%;

    .num {
      font-size: 38rpx;
      font-weight: 500;
      color: #333333;
      line-height: 62rpx;
    }
    .name {
      font-size: 26rpx;
      color: #333333;
      line-height: 34rpx;
    }
    .icon {
      width: 56rpx;
      height: 56rpx;
    }
  }
}
/deep/ .u-cell__body {
  padding: 20rpx 0;
}
/deep/ .u-cell__left-icon-wrap {
  margin-right: 30rpx !important;
}
</style>
